<template>
  <div class="dashboard-container">
    <div class="dashboard-text">你好, {{ name }}</div>

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img :src="imageUrl1?imageUrl1:require('./images/loading.gif')" />
        </div>
        <div class="swiper-slide">
          <img :src="imageUrl2" />
        </div>
        <div class="swiper-slide">
          <img :src="imageUrl3" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

// 引入图片接口
import { reqGetHomePageImages } from "@/api/modules/homePageImages";

//引入swiper
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "Dashboard",
  data() {
    return {
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },

  methods: {
    // 获取主页图片
    async getHomePageImages() {
      const result1 = reqGetHomePageImages();
      const result2 = reqGetHomePageImages();
      const result3 = reqGetHomePageImages();

      try {
        const result = await Promise.all([result1, result2, result3]);
        result.forEach((element, index) => {
          this["imageUrl" + (index + 1)] = element.data.imgurl;
        });
      } catch (error) {
        this.$message.error("图片加载出错" + error);
      }

      this.$nextTick(() => {
        // 轮播图
        new Swiper(".swiper-container", {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },

          // 自动轮播
          // autoplay: true,

          // 如果需要滚动条
          // scrollbar: {
          //   el: '.swiper-scrollbar',
          // },
        });
      });
    },
  },

  mounted() {
    // 加载轮播图
    this.getHomePageImages();
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.swiper-container {
  width: 1000px;
  height: 570px;
  margin-top: 20px;
  margin-left: 0;

  img {
    width: 100%;
    height: 100%;
    // width: 200px;
    // height: 200px;
  }
}
</style>
